<template>
    <div class="app-container">
        <el-form :model="postForm" :rules="rules" ref="postForm" label-width="100px" style="width: 80%;">
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="postForm.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button v-loading="loading" type="primary" @click="onSubmit">保存</el-button>
                <el-button @click="goBack">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

    import { getDetail, add, update } from '@/api/category';

    export default {
        data() {
            return {
                loading: false,
                rules: {
                    name: [
                        { required: true, message: '请输入分类名称', trigger: 'blur' },
                        { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
                    ]
                },
                postForm: {
                    id: '',
                    name: '',
                    status: 0
                },
                isUpdate: false
            }
        },
        created() {
            const reg = /\/update\/(\d*)$/
            if (reg.test(this.$route.path)) {
                this.isUpdate = true;
                const ID = RegExp.$1;
                this.fetchData(ID);
            }
        },
        methods: {
            fetchData(ID) {
                getDetail(ID).then(response => {
                    this.postForm.id = response.data.id;
                    this.postForm.name = response.data.name;

                }).catch(err => {
                    console.log(err)
                });
            },
            onSubmit() {
                const that = this;
                this.$refs.postForm.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        if (that.isUpdate) {
                            update(that.postForm).then(response => {
                                if (response.code === 0) {
                                    that.$notify({
                                        title: '成功',
                                        message: '更新成功',
                                        type: 'success',
                                        duration: 2000
                                    });
                                    this.$router.go(-1);
                                } else {
                                    that.$message({
                                        title: '失败',
                                        message: '原因:' + response.msg,
                                        type: 'error',
                                        duration: 3000
                                    });
                                }
                                that.loading = false;
                            }).catch(err => {
                                that.$message({
                                    title: '失败',
                                    message: '原因:' + err.msg ? err.msg : err,
                                    type: 'error',
                                    duration: 3000
                                });
                                that.loading = false;
                            });
                        } else {
                            add(that.postForm).then(response => {
                                if (response.code === 0) {
                                    that.$notify({
                                        title: '成功',
                                        message: '添加成功',
                                        type: 'success',
                                        duration: 2000
                                    });
                                    this.$router.go(-1);
                                } else {
                                    that.$message({
                                        title: '失败',
                                        message: '原因:' + response.msg,
                                        type: 'error',
                                        duration: 3000
                                    });
                                }
                                that.loading = false;
                            }).catch(err => {
                                that.$message({
                                    title: '失败',
                                    message: '原因:' + err.msg ? err.msg : err,
                                    type: 'error',
                                    duration: 3000
                                });
                                that.loading = false;
                            });
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            goBack() {
                this.$router.go(-1);
            }
        }
    }
</script>